<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Group Link</title>
    <script src="../dist/quark-renderer.js"></script>
  </head>
  <body>
    <div id="main" style="width: 1024px; height: 800px"></div>
    <script type="text/javascript">
      let qr = QuarkRenderer.init(document.getElementById('main'));
      let group1 = new QuarkRenderer.Group({
        draggable: true,
        linkable: true,
        resizeStrategy: 'resize',
        position: [100, 100],
        shape: {
          width: 200,
          height: 80,
        },
        style: {
          fill: '#61DAFB',
          stroke: 2,
        },
      });

      qr.add(group1);

      group1.add(
        new QuarkRenderer.Text({
          style: {
            x: 0,
            y: 0,
            text: 'Role',
            textFont: '24px Microsoft Yahei',
            textPadding: 5,
            textPosition: 'insideLeft',
            textFill: '#393e46',
          },
          draggable: false,
        }),
      );

      // group1.add(
      //   new QuarkRenderer.Line({
      //     style: {
      //       stroke: 'rgba(0, 0, 0, 0.8)',
      //     },
      //     shape: {
      //       x1: 0,
      //       y1: 30,
      //       x2: 200,
      //       y2: 30,
      //     },
      //   }),
      // );

      for (let i = 0; i < 10; i++) {
        group1.add(
          new QuarkRenderer.Text({
            style: {
              x: 0,
              y: 18 * (i + 2), //这里的 18 是字号，注意：这里手动计算高度有风险
              text: `Role ${i}   Number`,
              textFont: '18px Microsoft Yahei',
              textPadding: 5,
              textPosition: 'insideLeft',
              textFill: '#393e46',
            },
            draggable: false,
          }),
        );
      }

      let group2 = new QuarkRenderer.Group({
        draggable: true,
        linkable: true,
        resizeStrategy: 'resize',
        position: [0, 0],
        shape: {
          width: 200,
          height: 80,
        },
        style: {
          fill: '#61DAFB',
          stroke: 2,
        },
      });
      group2.add(
        new QuarkRenderer.Text({
          style: {
            x: 0,
            y: 0,
            textFill: '#393e46',
            text: 'User',
            textFont: '24px Microsoft Yahei',
            textPadding: 5,
            textPosition: 'insideLeft',
          },
          draggable: false,
        }),
      );
      qr.add(group2);

      let visioLink = new QuarkRenderer.VisioLink({
        position: [100, 200],
        draggable: true,
        isCable: true,
        showTransformControls: true,
        style: {
          // lineDash: [10, 10],
          // stroke: 'rgba(20, 220, 60, 0.8)',
          lineWidth: 2,
          text: 'This is Visio link.',
        },
        shape: {
          points: [
            [10, 10],
            [500, 10],
          ],
        },
      });
      qr.add(visioLink);
    </script>
    <div id="Main" style="width: 600px; height: 400px"></div>
  </body>
</html>
